<template>
	<view class="achievement">
		<image class="bg-set" src="../../static/global-bg.jpg" mode="widthFix"></image>
		<view class="add-input-group">
			<input type="text" placeholder="创建新的娱乐项目" class="add-input" v-model="newTodo" />
			<button class="add-btn" @tap="addTodo">
				新增
			</button>
		</view>
		<view 
			v-for="(item, index) in list" 
			:key="item.id" 
		>
			<ListItem
				:item="item"
				@handleUpdate="open(item)"
				@handleChecked="handleChecked(item)"
				@handleDelete="handleDelete(item)"
			></ListItem>
		</view>
		<uni-popup ref="popup" type="bottom">
				<view class="popup-wrap">
					<view class="popup-header">
						<text class="popup-header-item" @tap="close">关闭</text>
						<text class="popup-header-item" @tap="handleUpdate">保存</text>
					</view>
					<view class="popup-content">
						<input type="text" v-model="newContent" />
					</view>
				</view>
			</uni-popup>
			<dialog-modal content="您确定要删除吗？" :dialogVisible="dialogVisible" title="提示" @handleCancel="handleCancel" @handleSure="handleSure"></dialog-modal>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {addTodoApi, delTodoApi, updateTodoApi,getTodoApi, checkTodoApi} from '@/api/todo.js'
	import ListItem from '@/components/ListItem.vue'
	import UniPopup from '@/components/uni-popup/uni-popup.vue'
	import DialogModal from '@/components/DialogModal.vue'
	export default {
		components:{
			ListItem,
			UniPopup,
			DialogModal
		},
		data() {
			return {
				popup: false,
				newContent: '',
				list: [],
				newTodo: '',
				isVisible: false,
				changeItem: {},
				deleteItem: {},
				dialogVisible: false,
			};
		},
		methods: {
			handleChecked(item) {
				console.log(item)
				checkTodoApi(item.id).then(res => {
					if (res.code== 200) {
						return uni.showToast({
							title: '已完成',
							duration: 1000
						})
					} else {
						return uni.showToast({
							title: res.msg,
							icon:'none'
						})
					}
					this.getTodos()
				})
			},
			handleCancel() {
				this.dialogVisible = false
			},
			handleSure() {
				delTodoApi(this.deleteItem).then(res => {
					if (res.code !== 200) {
						return uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					this.getTodos()
				})
				this.dialogVisible = false
			},
			handleDelete(item) {
				// 弹出询问框
				this.deleteItem = item.id
				this.dialogVisible = true
			},
			handleUpdate() {
				// 弹出修改框
				// this.list[this.changeItem].content = this.newContent
				updateTodoApi(this.changeItem.id, this.newContent).then(res => {
					if (res.code!== 200) {
						return uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}else {
						uni.showToast({
							title: res.message,
							duration: 1000
						})
					}
					this.getTodos()
				})
				this.close()
			},
			close() {
				this.$refs.popup.close()
			},
			addTodo() {
				const todo = {
					id: 10,
					content: this.newTodo,
					checked: false
				}
				addTodoApi(this.userInfo.userid, 1, this.newTodo).then(res => {
					if (res.code !== 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.message,
							duration: 2000
						})
					}
				})
				this.newTodo = ''
				this.list.push(todo)
			},
			open(item){
				this.changeItem = item
				this.newContent = item.content
				// this.newContent = this.list[index].content
				this.$refs.popup.open()
			},
			getTodos() {
				getTodoApi(this.userInfo.userid, 1).then(res => {
					if (res.code !== 200) {
						return uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					this.list = res.data
				})
			}
		},
		mounted() {
			this.getTodos()
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.add-input-group {
		display: flex;
		margin-bottom: 30upx;
		padding: 0 40upx;
		margin-top: 30upx;
		.add-input{
			height:50upx;
			margin-left: 10upx;
			width: 60%;
			color: #fff;
			text-align: center;
			border-bottom: 1px $theme-color solid;
			border-radius: 10upx;
			font-size: $uni-font-size-base
		 }
		.add-btn{
			background: linear-gradient(to right, #ffe7ba, $theme-color);
			border-radius: 100rpx;
			font-size: $uni-font-size-base;
			width: 150rpx;
			height: 50upx;
			line-height: 50upx;
			color: white;
		}
	}
	.popup-wrap {
		background-color: #ffffff;
		min-height: 200px;
		.popup-header {
			display: flex;
			flex-direction: row-reverse;
			font-size: 14px;
			color: #666;
			border-bottom: 1px #999 solid;
			.popup-header-item {
				height: 50px;
				line-height: 50px;
				padding: 0 15px;
			}
		}
		.popup-content {
			padding: 10px;
		}
	}
</style>
